<template>
	<view>
		<view class="list" v-for="(item,index) in list" :key='index'>
			<image :src="item.iconPath" mode="" class="bg"></image>
			<view class="card_number">
				<block v-for="(ite,inde) in 12" :key="inde">
					<text class="dian" :class="{'margin_rigth':(inde+1)%4 ==0}"></text>
				</block>
				<text class="value">{{item.value}}</text>
			</view>
		</view>
		<view class="add_box" @click="handleClick">
			<view class="add">+</view>
			<view class="text">添加银行卡</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const list = reactive([{
		iconPath:'https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/nongyan.png',
		value:7562
	},
	{
		iconPath:'https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/zhaoshang.png',
		value:4468
	}])
	const handleClick = ()=>{
		uni.navigateTo({
			url:'/pagesA/addCard/addCard'
		})
	}
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.list {
		position: relative;
		padding: 30rpx;

		.bg {
			width: 100%;
			height: 224rpx;
		}

		.card_number {
			position: absolute;
			left: 120rpx;
			top: 150rpx;
			font-size: 50rpx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			.dian {
				width: 16rpx;
				height: 16rpx;
				background: #FFFFFF;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.margin_rigth {
				margin-right: 30rpx;
			}
		}
	}
	.add_box{
		display: flex;
		align-items: center;
		padding:0 30rpx;
		height: 150rpx;
		background: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 16rpx;
		.add{
			color:  #333333;
			font-size: 60rpx;
			margin-right: 16rpx;
			height: 90rpx;
			line-height: 90rpx;
		}
		.text{
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #000000;
			line-height: 90rpx;
			height: 90rpx;
			font-weight: 400;
		}
	}
</style>